<template>
    <div class="hy-form">
       <div class="header">
          <slot name="header"></slot>
       </div>
      <el-form :label-width="labelWidth">
        <el-row>
           <template v-for="item in formItems" :key="item.label">
             <el-col v-bind="colLayout">
               <el-form-item 
                 v-if="!item.isHidden"
                 :label="item.label"
                 :rules="item.rules"
                 :style="itemStyle"
                >
                <template v-if="item.type==='input' || item.type==='password'">
                    <el-input
                      :placeholder="item.placeholder"
                      :show-password="item.type==='password'"
                      v-model="formData[`${item.field}`]"
                      ></el-input>
                </template>
               <template v-else-if="item.type==='select'" >
                 <el-select 
                    :placeholder="item.placeholder" 
                    style="width:100%"
                    v-model="formData[`${item.field}`]"
                 >
                  <el-option
                      v-for="option in item.options"
                     :key="option.value"
                     :value="option.value">{{option.title}}
                  </el-option>
                 </el-select>
               </template>
                <template v-else-if="item.type==='datepicker'">
                    <el-date-picker
                        v-bind="item.otherOptions"
                        style="width:100%" 
                        v-model="formData[`${item.field}`]"
                        >
                    </el-date-picker>
               </template>
                  </el-form-item>
             </el-col>
           </template>
        </el-row>
      </el-form>
      <div class="footer">
          <slot name="footer"></slot>
       </div>
    </div>
</template>

<script lang='ts'>
import { computed,ref,watch } from 'vue'
// import  { IFormItem } from '../types'
export default{
   
    props:{
      modelValue:{
           type:Object,
           required:true
      },
      formItems:{
          type:Array,
          default:()=>[]
      },
       
      labelWidth:{
          type:String,
          default:'100px'
      },
      itemStyle:{
        type:Object,
        default:()=>({padding:'10px 40px'})
      },
      colLayout:{
        type:Object,
        default:()=>({
          xl:8,
          lg:8,
          md:12,
          sm:24,
          xs:24
        })
      }
    },
    emits:['update:modelValue'],
    setup (props,{ emit }) {
        const formData=ref(({...props.modelValue}))

        watch(()=>props.modelValue,(newValue)=>{
          formData.value={...newValue}
        })

      watch(formData,(newValue)=>{
          emit('update:modelValue',newValue)
      },{
        deep:true
      })
      
        return {
          formData
        }
    }
}
</script>

<style lang="less" scoped>
.hy-form{
  width: 100%;
  padding: 20px;
 
}
</style>